<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="collapseChage">
      <el-icon  class="el-icon-s-fold" style="margin-left:0px;font-size: 25px;">
        <template  v-if="!collapse">
        <Fold/>
        </template>
        <template v-else>
          <Expand/>
        </template>
      </el-icon>
    </div>
    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
    <top-nav id="topmenu-container" class="topmenu-container" style="display: inline-block" v-if="topNav"/>
    <div class="header-right">
      <div class="header-user-con">
        <!-- 全屏显示 -->
        <div class="btn-fullscreen" @click="handleFullScreen">
          <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
            <FullScreen></FullScreen>
          </el-tooltip>
        </div>
        <!-- 消息中心 -->
        <div class="btn-bell" @click="router.push('/tabs')">
          <el-tooltip
              effect="dark"
              :content="message?`有${message}条未读消息`:`消息中心`"
              placement="bottom"
          >
            <Bell class="el-icon-lx-notice"></Bell>
          </el-tooltip>
          <span class="btn-bell-badge" v-if="message"></span>
        </div>
        <!-- 用户头像 -->
        <div class="user-avator">
          <img src="../../assets/img/img.jpg"/>
        </div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown :hide-on-click="false" class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">{{ loginUser.loginName }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template v-slot:dropdown>
            <el-dropdown-menu>
              <el-dropdown-item> <a href="https://gitee.com/xiaominxs/fm-process-admin" target="_blank">项目仓库</a></el-dropdown-item>
              <el-dropdown-item @click.stop="setting = true">
                <span>布局设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import bus from 'vue3-eventbus';
import screenfull from 'screenfull'
import {logout} from '@/api/user';
import Breadcrumb from '@/components/Breadcrumb/Breadcrumb.vue'
import TopNav from '@/components/common/TopNav/index.vue'
import {Tool} from "@/utils/tool";
import variables from "@/assets/styles/variables.module.scss";
import {useStore} from 'vuex'
import {ref, inject, reactive, onMounted, computed, watch} from 'vue';
import {useRouter} from "vue-router";
import { ArrowDown } from '@element-plus/icons-vue'

const router = useRouter()
const collapse = ref(false);
const fullscreen = ref(false);
const classh2 = ref(false);
const name = ref("fengmin")
const message = ref(2);
const loginUser: any = reactive(Tool.getInstance().getLoginUser());
const store: any = useStore();
const handleCommand: any = (command: any) => {
  if (command == 'loginout') {
    logout('/process/admin/user/logout/' + loginUser.token).then(() => {
      Tool.getInstance().removeLoginUser()
      window.location.href = '/';
    })
  }
}
const collapseChage: any = () => {
  collapse.value = !collapse.value;
  bus.emit('collapse', collapse.value);
}
const handleFullScreen: any = () => {
  if (fullscreen) {
    screenfull.toggle()
  } else {
    screenfull.exit()
  }
  fullscreen.value = !fullscreen.value;
}

onMounted(() => {
  if (document.body.clientWidth < 1500) {
    collapseChage();
  }
});

let setting = computed({
  get: () => store.state.settings.showSettings,
  set: (val) => {
    store.dispatch('settings/changeSetting', {
      key: 'showSettings',
      value: val
    })
  }
})
const topNav = computed({
  get: () => store.state.settings.topNav,
  set: (val) => {
  }
})
const myvariables = computed({
  get: () => variables,
  set: (val) => {
  }
})


</script>
<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: black;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.logo {
  color: rgb(191, 203, 217);
  background-color: rgb(50, 65, 87);
  box-sizing: border-box;
  font-size: 30px;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 50px;
  left: 2px;
}


.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 50px;
  align-items: center;
}

.btn-fullscreen {
  margin-right: 5px;
  font-size: 24px;
}

.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.btn-bell-badge {
  position: absolute;
  right: 4px;
  top: 0px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}

.btn-bell .el-icon-bell {
  color: #999093;
}

.btn-bell .el-icon-lx-notice {
  color: #000000;
  width: 22px;
  height: 22px;
}

.user-name {
  margin-left: 10px;
}

.user-avator {
  margin-left: 20px !important;
  width: 70%;
  height: 70%;
}

.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-dropdown-link {
  color: #050000;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>
